<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles/index.css" />
</head>

<body>
    <!--
        watch 侦听器 (监视器)
        作用:监视数据变化，执行一些 业务逻辑 或 异步操作
        语法:
        1 简单写法 简单类型数据，直接监视
            data: (
                words: '苹果',
                obj: {
                    words: '苹果'
                }
            },
            watch: {
                // 该方法会在数据变化时，触发执行
                数据属性名 (newValue，oldValue) {
                    一些业务逻辑 或 异步操作
                },
                对象.属性名识 (newValue，oldValue) {
                    一些业务逻辑 或 异步操作
                }
            }
        2 完整写法 添加额外配置项
            
    -->
    <div id="app">
        <!-- 条件选择框 -->
        <div class="query">
            <span>翻译成的语言：</span>
            <select>
                <option value="italy">意大利</option>
                <option value="english">英语</option>
                <option value="german">德语</option>
            </select>
        </div>

        <!-- 翻译框 -->
        <div class="box">
            <div class="input-wrap">
                <textarea v-model="obj.words"></textarea>
                <span><i>⌨️</i>文档翻译</span>
            </div>
            <div class="output-wrap">
                <div class="transbox">{{result}}</div>
            </div>
        </div>
    </div>
    </div>

    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.js"></script>

    <script>
        // 接口地址：https://applet-base-api-t.itheima.net/api/translate
        // 请求方式：get
        // 请求参数：
        // （1）words：需要被翻译的文本（必传）
        // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
        // -----------------------------------------------
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    obj: {
                        words: '',
                    },
                    result: '',
                    //不渲染 不需要放在这边 可以直接使用
                    //timer: null   //延时器id
                }
            },
            watch: {
                //该方法在数据变化时候调用执行
                'obj.words'(newValue, oldValue) {
                    //console.log('变化了:', newValue, oldValue)

                    //防抖 延迟执行
                    //干啥实现等一会，延迟一会，一段时间内没有再次触发 才执行
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await axios({
                            url: 'https://applet-base-api-t.itheima.net/api/translate',
                            params: {
                                words: newValue
                            }
                        })
                        console.log(res.data.data)
                        this.result = res.data.data
                    }, 300)
                }
            },
            methods: {
            },
            computed: {
            }
        })
    </script>
</body>

</html>